<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>车辆信息</title>
    <link th:include="common/header::copy"/>
    <script type="text/javascript">

        function search(){
            $("#dg").datagrid('load',{
                "cidcard":$("#s_cidcard").val(),
                "phone":$("#s_phone").val(),
                "idcard":$("#s_idcard").val(),
                "cname":$("#s_cname").val(),
                "lname":$("#s_lname").val()
            });
        }
        
        function resetValue(){
            $("#id").val("");
            $("#cidcard").textbox('clear');
            $("#cname").textbox('clear');
            $("#lname").textbox('clear');
            $("#phone").textbox('clear');
            $("#isauth").textbox('clear');
            $("#idcard").textbox('clear');
            $("#idcardColor").textbox('clear');
            $("#permitPhoto").val('clear');
            $("#ctype").textbox('clear');
            $("#cton").textbox('clear');
            $("#cheight").textbox('clear');
            $("#cwidth").textbox('clear');
            $("#clength").textbox('clear');
            $("#pic").removeAttr("src");
        }

        function openAddDialog(){
            $("#dlg").dialog("open").dialog("setTitle","添加车辆信息");
        }

        function openModifyDialog(index){
            $("#dg").datagrid('selectRow',index);
            var row =$("#dg").datagrid('getSelected');
            $("#dlg").dialog("open").dialog("setTitle", "修改车辆信息");
            $("#fm").form("load", row);
        }

        function cellStyler(value,row,index){
            if (value == 0){
                return '<span style="color: red">未认证</span>';

            }else{
                return '<span style="color: green">已认证</span>';
            }
        }

        function formatPrice(val,row){
            if (val < 20){
                return '<span style="color:red;">('+val+')</span>';
            } else {
                return val;
            }
        }

        function closeRoleSetDialog(){
            $("#dlg2").dialog("close");
        }
        function formatop(val,row,index) {
            return '<a href="#" onclick="authentication(\'/veh/vehicle/auth\','+row.id+')">认证</a>' +
                '&nbsp;&nbsp;' +
                '<a href="#" onclick="openModifyDialog('+index+')">修改</a>' +
                '&nbsp;&nbsp;' +
                '<a href="#" onclick="deleteData(\'/veh/vehicle/delete\','+row.id+',id,\'数据已成功删除！\');">删除</a>';
        }

    </script>
</head>
<body style="margin: 1px">
<table id="dg" title="车辆信息" class="easyui-datagrid"
       fitColumns="true" pagination="true" rownumbers="true" singleSelect="true"
       url="/veh/vehicle/list" fit="true" toolbar="#tb" method="post" striped="true">
    <thead>
      <th field="id" width="50" align="center" hidden="true">编号</th>
      <th field="cidcard" width="50" align="center">车牌号</th>
      <th field="cname" width="50" align="center">司机姓名</th>
      <th field="phone" width="50" align="center">注册手机号</th>
      <th field="idcard" width="80" align="center">身份证号</th>
      <th field="lname" width="50" align="center">车主姓名</th>
      <th field="cton" width="20" align="center">吨位</th>
      <th field="clength" width="20" align="center">车长</th>
      <th field="isauth" width="50" align="center" formatter="cellStyler">是否认证</th>
      <th field="op" width="90" align="center" formatter="formatop">操作</th>
    </thead>
</table>

<div id="tb">
    <div shiro:hasPermission="veh:vehicle:list" style="display: inline-block;float: right;">
        车&nbsp; 牌&nbsp; 号：<input type="text" id="s_cidcard" size="10" onkeydown="if(keyCode==13) search()"/>
        队 长姓 名：<input type="text" id="s_lname" size="10" onkeydown="if(keyCode==13) search()"/>
        司 机姓 名：<input type="text" id="s_cname" size="10" onkeydown="if(keyCode==13) search()"/>
        队 长电 话：<input type="text" id="s_phone" size="10" onkeydown="if(keyCode==13) search()"/>
        队长身份证：<input type="text" id="s_idcard" size="10" onkeydown="if(keyCode==13) search()"/>
        <a href="javascript:search()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
    </div>
    <div style="display: inline-block;">
        <a shiro:hasPermission="veh:vehicle:add" href="javascript:openAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
        <a href="javascript:uploadidalogonline(2)" class="easyui-linkbutton" plain="true">导入</a>
        <a href="javascript:" class="easyui-linkbutton"data-options="plain:true" onclick="$('#dg').datagrid('toExcel','veh.xls');">导出</a>
    </div>

</div>


<div id="dlg" class="easyui-dialog" style="width: 900px;height: 450px;padding: 10px 20px"
     closed="true" buttons="#dlg-buttons" data-options="onClose:function(){resetValue()}">
    <form id="fm" method="post">
        <input type="hidden" id="id" name="id">
        <table cellspacing="8px">
            <h2 style="border-bottom-color: #99cdff">车辆信息</h2>
            <div style="margin-bottom:10px">
                <input name="cidcard" id="cidcard" class="easyui-textbox" required="true" label="车牌号:" style="width:300px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                <input class="easyui-combobox"
                       label="车牌颜色:"
                       style="width:300px"
                       name="idcardColor"
                       data-options="
					url:'/veh/vehicle/getAllColor',
					method:'get',
					valueField:'id',
					textField:'color',
					panelHeight:'auto'">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-combobox"
                       label="车辆类型:"
                       style="width:300px"
                       name="ctype"
                       data-options="
					url:'/veh/vehicle/getAllTruckType',
					method:'get',
					valueField:'id',
					textField:'abbr',
					panelHeight:'auto'">

                <input name="cton" id="cton" class="easyui-textbox" required="true" label="吨位:" style="width:300px">
            </div>
            <div style="margin-bottom:10px">
            <input name="clength" id="clength" class="easyui-textbox" required="true" label="车长:" style="width:300px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="cheight" id="cheight" class="easyui-textbox" required="true" label="车高:" style="width:300px">
            </div>
            <div style="margin-bottom:10px">
                <input name="cwidth" id="cwidth" class="easyui-textbox" required="true" label="车宽:" style="width:300px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input class="easyui-combobox"
                       label="车主姓名:"
                       style="width:300px"
                       name="ownerId"
                       data-options="
					url:'/veh/vehicle/getAllLeader',
					method:'get',
					valueField:'id',
					textField:'lname',
					panelHeight:'auto'">
            </div>
            <div>
                <tr>
                    <td><a href="javascript:uploadidalogonline(1)">车辆行驶证</a></td>
                    <td>
                        <img id="pic" name="pic" style="width: 100px;height: 100px">
                        <input id="permitPhoto" name="permitPhoto" hidden>
                    </td>
            </div>

        </table>
    </form>
</div>

<div id="dlg-buttons">
    <a href="javascript:save('/veh/vehicle/save','保存成功')" class="easyui-linkbutton" iconCls="icon-ok" >保存</a>
    <a href="javascript:closeDialog('#dlg')" class="easyui-linkbutton" iconCls="icon-cancel" >关闭</a>
</div>
<div id="uploadonlineinfo" class="easyui-dialog" style="width:380px;padding:10px 40px" closed="true">
    <form id="fam" method="post" enctype="multipart/form-data">
        <input type="file" id="file" name="file">
        <input type="hidden" id="flag" name="flag">
    </form>

    <div data-options="region:'south',border:false" style="text-align:center;padding:5px 0 0;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)"
           onclick="uploadonline();" style="width:80px">上传</a>
    </div>
</div>
<script type="text/javascript">

    function uploadidalogonline(flag) {
        $('#uploadonlineinfo').dialog('open').dialog('setTitle', '文件上传');
        $("#flag").val(flag);
    }

    function uploadonline() {
        var file = $("#file")[0].files[0];
        var flag = $("#flag").val();
        var url;
        if (file.name == "") {
            alert("请先选择文件");
            return false;
        }
        if (flag == 1) {
            url = "/image/upload";
            if (!file.name.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) {

                alert("文件格式错误");
                return false;
            }
        } else {
            url = "/veh/vehicle/excelImport";
            if (!file.name.match(/.xls|.xlsx/i)) {
                alert("文件格式错误");
                return false;
            }
        }
        var form = new FormData();
        form.append("file", file);
        var picget = "/image/show?fileName=";
        $.ajax({
            url: url,
            type: "post",
            data: form,
            processData: false,
            contentType: false,
            success: function (data) {
                $('#uploadonlineinfo').window('close');
                if (flag == 1) {
                    $("#pic").attr("src", picget+data.info);
                    $("#permitPhoto").val(data.info)
                }
                console.log(data);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }
</script>

</body>
</html>